function Page(el,options={}){
    this.el=document.querySelector(el)
    this.options=options
    //启动
    this.init()

}
Page.prototype.init=function(){

    //调用父标签(加样式和点击事件)
    this.parentTag()
    //调用分页标签和页码标签(页码标签必须在分页标签里面调用,先有分页后有页码)
    this.createfyTag()
    // 调用事件
    this.addEvent()
    
}

// 设置父盒子的属性
Page.prototype.parentTag=function(){
    this.el.style.display='flex'
    this.el.style.justifyContent='center'
    this.el.style.alignItems='center'
}

// 给父绑定点击事件
Page.prototype.addEvent=function(){
    this.el.onclick=(evt)=>{
        let e=evt||window.event
        let target=e.target||e.srcElemnt
        // 判断当前操作的标签
        if(target.nodeName==='P'){
        // 四种情况
         switch(target.innerText){
            //  首页
            case this.options.pageTag.first:
            this.options.pageInfo.pageNum=1
           
            break;
            //上一页(最少是第一页)
            case this.options.pageTag.prev:
                if(this.options. pageInfo.pageNum==1) return
                this.options.pageInfo.pageNum--
                break;
             //下一页 
             case this.options.pageTag.next:
                 if(this.options. pageInfo.pageNum==this.options.pageInfo.totalPage) return
                 this.options.pageInfo.pageNum++
            // 末页
            case this.options.pageTag.last:
                this.options.pageInfo.pageNum=this.options.pageInfo.totalPage
            default:
                if(parseInt(target.innerHTML)>0){
                    this.options.pageInfo.pageNum=parseInt(target.innerHTML)
                }
            break;
        }
        this.createfyTag()
      }
    }
}

// 创建分页标签
Page.prototype.createfyTag=function(){
   //清空(因为在点击事件里面调用了)
   this.el.innerHTML=''
  //    1.遍历(挨个获取pageTag里面的键)
  for(let key in this.options.pageTag){
    //   调用标签样式
      this.createStyle('p',this.options.pageTag[key],this.el)
     
  }
//  调用分页页码
  this.createymTag()

}

// 创建页码标签
Page.prototype.createymTag=function(){
    // 1.获取到第三个分页p标签,在里面放数字
    let p3Obj=this.el.querySelector('p:nth-of-type(3)')
    p3Obj.style.border='none'
    p3Obj.style.background='none'
    p3Obj.style.margin='0px'
    p3Obj.style.padding='0px'
    // 2.循环创建页码
    let pageNum=this.options.pageInfo.pageNum
    // 总页数=(总条数/每页显示条数)的向上取整(1条也要显示)
    this.options.pageInfo.totalPage=Math.ceil(this.options.pageInfo.totalData/this.options.pageInfo.pageSize)
    let totalPage=this.options.pageInfo.totalPage

    // 第一种情况
    if(totalPage<7){
        for(let i=1;i<=totalPage;i++){
            this.createStyle('p',i,p3Obj)
        }
    }

    //  第二种情况
    else if(pageNum<5){
        for(let i=1;i<=5;i++){
            this.createStyle('p',i,p3Obj)
        }
        this.createStyle('p','...',p3Obj)
        this.createStyle('p',totalPage-1,p3Obj)
        this.createStyle('p',totalPage,p3Obj)
    } 
    // 第三种情况
    else if(pageNum==5){
        for(let i=1;i<=7;i++){
            this.createStyle('p',i,p3Obj)
        }
        this.createStyle('p',totalPage-1,p3Obj)
        this.createStyle('p',totalPage,p3Obj)
    }
    // 第四种情况
    else if(pageNum>5&&pageNum<totalPage-4){
        for(let i=1;i<=2;i++){
            this.createStyle('p',i,p3Obj)
        }
        this.createStyle('p','...',p3Obj)
        this.createStyle('p',pageNum-2,p3Obj)
        this.createStyle('p',pageNum-1,p3Obj)
        this.createStyle('p',pageNum,p3Obj)
        this.createStyle('p',pageNum+1,p3Obj)
        this.createStyle('p',pageNum+2,p3Obj)
        this.createStyle('p','...',p3Obj)
        this.createStyle('p',totalPage-1,p3Obj)
        this.createStyle('p',totalPage,p3Obj)
    }
    // 第五种情况
    else if(pageNum>totalPage-4) {
        for(let i=1;i<=2;i++){
            this.createStyle('p',i,p3Obj)
        }
        this.createStyle('p','...',p3Obj)
        this.createStyle('p',totalPage-4,p3Obj)
        this.createStyle('p',totalPage-3,p3Obj)
        this.createStyle('p',totalPage-2,p3Obj)
        this.createStyle('p',totalPage-1,p3Obj)
        this.createStyle('p',totalPage,p3Obj)

    }  
}

// 封装标签样式
Page.prototype.createStyle=function(tagName,content,fatherObj) {
    //1. 创建标签
    let pObj=document.createElement(tagName)
    pObj.innerText=content
    pObj.style.border='1px solid black'
    pObj.style.color='black'
    pObj.style.margin='0 6px'
    pObj.style.padding='0 6px'
    pObj.style.display='inline-block'
    // 2.判断是否是当前页码标签
    if(content===this.options. pageInfo.pageNum){
        pObj.style.background='red'
    }


    // 1.2将造好并填好内容的标签追加到盒子中
    fatherObj.appendChild(pObj)

}